[0.7.x] Build MJS and CJS versions of the plugin #189
Conversation
|
Thank you for reopening this and jumping on it so quickly. I will give it a try. |
Doesn't work for me. Here are my configs and result. Let me know if I something is missing on my side - I haven't really tested packages with specific commits before, fresh package.json {
"type": "module",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"watch": "vite build --watch"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^2.0.2",
"autoprefixer": "^10.4.4",
"axios": "^0.27",
"laravel-vite-plugin": "github:timacdonald/vite-plugin#4f0383ea8a310226f1b859049964bfe94d07f307",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"tailwindcss": "^3.0.23",
"vite": "^4.0.0"
},
"dependencies": {
"@inertiajs/inertia": "^0.11.1",
"@inertiajs/inertia-svelte": "^0.8.0",
"@inertiajs/progress": "^0.2.7",
"svelte": "^3.46.6",
"svelte-loader": "^3.1.2"
}
}vite.config.js import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/js/app.js',
]),
svelte({
prebundleSvelteLibraries: true,
}),
],
optimizeDeps: {
include: [
"@inertiajs/inertia",
"@inertiajs/inertia-svelte",
]
}
});Result after Output |
|
Hi, the one commit for this modifies tsconfig files. Those files are not in my plugin folder. I tried npm update and npm install and still those files were not copied over. I see them in the git code list. I'm confused. Am I doing something wrong? |
|
Hey folks, sorry about that. I should have provided some steps for you to properly test this. What you will need to do is clone my repo / branch, build the plugin, and then link the plugin in your project. To setup the plugin, do the following somewhere outside of your project... git clone https://github.com/timacdonald/vite-plugin.git laravel-vite-plugin
cd laravel-vite-plugin
git checkout module-support
npm install
npm run build
npm linkThen in your projects directory, run Once you have done that you will hopefully be able to run @CodeKJ I was able to copy your |
|
Thank you for that info. I went through that process and everything went fine until I tried to start the vite dev server. I ran npm run dev -- --host and received this error message: error when starting dev server: I tried a google search and did not find anything on point. Thanks |
|
@fpolli It seems you might have a dollar sign in your I can only replicate your issue if I purposefully introduce an un-escaped dollar sign, for example when I add the following to my To fix this, you can escape the last dollar sign: - CORS_ALLOWED_ORIGINS=/${SERVER_HOST}(:[0-9]+)?$/
+ CORS_ALLOWED_ORIGINS=/${SERVER_HOST}(:[0-9]+)?\$/Related: |
|
Wow, there was a dollar sign in my email password. Thanks! |
|
@fpolli were you able to test this after fixing that issue in your |
|
Hi Tim, |
|
Hey @timacdonald, I suggest using some higher-level tool like unbuild so your build scripts can be greatly simplified. A multi-output config (ESM + CJS + types) would look like the following in a import { defineBuildConfig } from 'unbuild'
export default defineBuildConfig({
entries: [
'./src/index',
'./src/inertia-helpers/index',
],
clean: true,
declaration: true,
externals: [
// ?
],
rollup: {
emitCJS: true,
},
}) |
|
@timacdonald Can we make the You can read about Pure ESM Modules here. This will make Laravel future proof. Tip:
|
|
I agree that we should probably make this the default in Laravel skeleton (it's a todo in the PR description), but I need more testing on this from the community to ensure we don't break things. If you could pull this down, test it, and report if it worked as expected, that would be amazing. |
|
As a workaround, you could use this : import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
- laravel({
+ laravel.default({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
}); |
Just wanted to chime in here and say I'm running into this underlying issue as well and stumbled upon this PR and did try these steps and using the linked branch instead does seem to get things nearly working. One caveat to that working is that the TS types aren't being picked up by vscode. I was able to fix it by restoring the
Would be happy to test out any other changes to this PR. |
|
I just gave this a try, and it works great! I tested an existing app where I was then able to set |
|
Seems like this, along with the changes in Breeze, does break things. To reproduce: composer create-project laravel/laravel=v10.1.1 demo --prefer-dist
cd demo
composer require laravel/breeze
php artisan breeze:install vueThis results in the following error: vite v4.3.5 building for production...
transforming (18) node_modules/vue/dist/vue.runtime.esm-bundler.js(node:29166) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /[path-to-project]/demo): [SyntaxError] Unexpected token 'export'
/[path-to-project]/demo/postcss.config.js:1
export default {
^^^^^^
SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1187:20)
at Module._compile (node:internal/modules/cjs/loader:1231:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1321:10)
at Module.load (node:internal/modules/cjs/loader:1125:32)
at Module._load (node:internal/modules/cjs/loader:965:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:165:29)
at ModuleJob.run (node:internal/modules/esm/module_job:192:25)]
Node.js v20.1.0 |
|
rename the file |
|
@RobertBoes laravel/breeze is only supported for new projects, which assumes you are running the latest version of Laravel. |
Exactly because it's now ESM first. @RobertBoes rename your .js files to .cjs and make use of module.exports in that file |
|
@timacdonald This was a new project. I created a project before the latest release, added Breeze and then I got that error. It was right in between releases, yes, but still caused the error. And yes, I know how to fix it, I'm not asking how I could fix this issue, but it seems to me to introduce a breaking change. |
Laravel added default "type": "module" to their package.json in PR: laravel/vite-plugin#189. This breaks compilation with laravel-mix and therefore we need to remove this line from package.json in the installation process. The ability to compile with Vite shouldn't be affected by this, however some specific modules (like svelte) can be affected by this, as mentioned in the Laravel's PR. We think that the potential problem with specific libraries should be resolved by developer that uses them.
|
What's the actual fix here? |
|
@archoda, what issue are you facing exactly? |
Background
In there beginning, of this story at least, there were "CJS" or Common JS modules. CJS was the module system that Node created. It uses
require()andmodules.export.Life was good in Node-land and the developers rejoiced in the streets.
Browsers did not support this standard.
ECMAScript then standardised ES Modules "MJS". This module system uses
import X from './foo'andexport { X }type syntax.Unfortunately for package maintainers there was now a need to compile both CJS and MJS builds. Some build tools or systems required CJS, while others required MJS.
These were the darkest of days.
After a good while, the ecosystem caught up. MJS and CJS was available for most relevant packages. The developers, once again, rejoiced in the streets - although the package maintainers lost sleep trying to work out how to even build two outputs and why this noise even exists. Here is, the one and only, "Wes Bos" with more...
Anyone who has done this can feel the pain emanating from this tweet.
Slowly though, the tide has shifted. Many mainstream packages are now dropping support for CJS and it seems this is the direction the ecosystem is heading. Again, Wes Bos with more...
MJS is now supported by browsers, which is how Vite works. I don't believe browsers natively support MJS at all.
I don't think Node yet officially supports MJS. I believe there is experimental support for it.
**The facts may vary, but this is the general gist of things.
Why
With a fresh install of Laravel, some major Vite plugins no longer work out of the box. The Svelte plugin, for example, no longer supports projects without
"type": "module"."type": "module"tells build tools, such as Vite, that you want to use ESM.See: #187
With Laravel's switch to Vite, all project level dependencies, that is dependencies that you use in your application code, already need to be MJS. Vite only works with projects using MJS. However, Vite plugins referenced in the
vite.config.jsfile may be CJS or MJS.This PR introduces an MJS version of the plugin so that we can make the
package.jsonfile use"type": "module"by default.This PR is only additive. It does not remove the CJS build. This means projects without
"type": "module"will continue to build, as we continue to ship CJS.See: